<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
    <title>HbaseM</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <style>

        .head1{
            background-color:#8EE5EE;
        }
        .head2{
            background-color:#FAEBD7;
        }
        .h-title{
            margin-left: 0.5rem;
            font-size: 1.8rem;
            font-weight: 600;
        }
        .b-title{
            margin-left: 0.5rem;
            font-size: 1.6rem;
            font-weight: 600;
        }


        </style>
</head>

<body>


    <nav class="navbar navbar-expand-lg navbar-light bg-light ">
        <div class="container">
            <a class="navbar-brand" href="#">云数据中心服务监控子系统</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item {% if p== 'home' %} active {%endif%}">
                        <a class="nav-link" href="/">主节点状态</a>
                    </li>
                    <li class="nav-item {% if p== 'snapshot' %} active {%endif%}">
                        <a class="nav-link" href="/snapshot">历史快照</a>
                    </li>
                  <!--  <li class="nav-item {% if p== 'about' %} active {%endif%}">
                        <a class="nav-link" href="/about">About</a>
                    </li>-->
                </ul>
            </div>
        </div>
    </nav>

    {% block main %} {% endblock %}

    <footer class="mt-3 p-4" style="background-color: #cfcfcf;">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <strong>Copyright &copy; 2021</strong>
                </div>
                <div class="col-md-4">
                   
                </div>
            </div>
        </div>
    </footer>

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

    <script src="https://cdn.staticfile.org/highcharts/8.1.2/highcharts.js"></script>
    <script src="https://cdn.staticfile.org/highcharts/8.1.2/highcharts-more.min.js"></script>
    <script src="https://cdn.staticfile.org/highcharts/8.1.2/modules/solid-gauge.min.js"></script>

    <script src="https://cdn.staticfile.org/highcharts/8.1.2/modules/heatmap.min.js"></script>
    <script src="https://cdn.staticfile.org/highcharts/8.1.2/modules/treemap.min.js"></script>
    <!-- 需要保存导出功能模块文件是在 highcharts.js 之后引入 -->
    <script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
    <!-- 客户端导出功能模块为可选选项 -->
    <script src="http://cdn.hcharts.cn/highcharts/modules/offline-exporting.js"></script>

    {% block vue %} {% endblock %}

</body>

</html>